<style lang="scss" scoped>
.pro_detail{
    min-height: 100vh;
    background-color: #eee;
}
    .swiper{
        width: 100%;
        height: 280px;
        img{
            height: 280px;
            width: 100%;
        }
    }
    .detail{
        width: 90%;
        box-sizing:border-box;
        min-height: 120px;
        padding: 5px 3%;
        border-radius: 11px;
        background-color: #fff;
        margin-top: 15px;
        margin-left: 5%;
        .name{
            font-size: 14px;
            font-weight: bold;
        }
        .price{
            height: 35px;
            line-height: 40px;
            font-size: 14px;
            .nP{
                color: red;
                font-weight: bold;
                font-size: 20px;
                span{
                    font-size: 12px;
                }
            }
            .oP{
                color: #999;
                text-decoration: line-through;
                margin-left: 15px;
                font-size: 14px;
            }
        }
        .hock{
            display: flex;
            justify-content: space-between;
            height:35px;
            line-height: 45px;
            font-size: 12px;
            color: #999;
        }
    }
    .sku{
        margin:15px 0;
        height: 45px;
        line-height: 45px;
        padding: 0 8%;
        background-color: #fff;
        &:active{
            background-color: #f5f5f5;
        }
    }
    .sku_poup{
        box-sizing: border-box;
        width: 100%;
        padding: 15px 5% 90px 5%;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 10px 10px 0 0;
        max-height: 595px;
        overflow-y: auto;
        .skuImg{
            height: 100px;
            position: relative;
            span{
                position:absolute;
                right: 0;
                top: 0;
                font-size: 30px;
            }
            img{
                height: 100px;
            }
        }
        .skuList{
            margin-top: 30px;
            .listTitle{
                height: 35px;
                line-height:40px;
                font-weight: bold;
            }
            .listItem{
                margin-top: 15px;
                span,
                .activeSku{
                    display:inline-block;
                    height: 25px;
                    line-height: 25px;
                    font-size: 14px;
                    padding:5px;
                    border-radius: 5px;
                    margin-right: 15px;
                    background-color: #eee;
                    margin-bottom: 10px;
                }
                .activeSku{
                    background-color: rgb(50, 134, 255);
                    color: #fff;
                }
                .number{
                    font-weight: bold;
                    text-align:right;
                }
            }
        }
        .btn{
            width:90%;
            box-sizing:border-box;
            height:40px;
            position: fixed;
            bottom: 15px;
            left: 5%;
            background-image: linear-gradient(to right,rgb(255,204,29),rgb(238,12,36));
            border-radius:20px;
            button{
                height: 40px;
                width: 50%;
                border:0;
                background-color: rgba(0,0,0,0);
                &:active{
                    background-color: #ff0107;
                }
                &:nth-child(1){
                    border-radius: 20px 0 0 20px;
                }
                &:nth-child(2){
                    border-radius: 0 20px 20px 0;
                }
            }
        }
    }
</style>
<template>
    <div class="pro_detail">
        <!-- 商品规格遮罩层组件 -->
        <van-overlay :show="sku_show" @click="skucheck">
            <div class="sku_poup">
                <div class="skuImg">
                    <img :src="detail.duck_img.replace('www.poralmall.com','192.168.13.10')" alt="">
                    <i>
                        ￥{{ 
                            detail.sku_type == 1 ? 
                            detail.sku_size[sku_index.size_index].price:
                            detail.sku_color[sku_index.color_index].price
                        }}
                    </i>
                    <span @click="sku_show=false">
                        ✖
                    </span>
                </div>
                <div class="skuList">
                    <div class="listTitle">
                        {{ detail.sku_color_title }}:
                    </div>
                    <div class="listItem">
                        <span 
                        v-for="(item,index) in detail.sku_color" :key="index"
                        :class="sku_index.color_index == index ? 'activeSku': ''"
                        @click="sku_index.color_index=index">
                            {{ item.color }}
                        </span>
                    </div>
                </div>
                <div class="skuList">
                    <div class="listTitle">
                        {{ detail.sku_size_title }}:
                    </div>
                    <div class="listItem">
                        <span 
                        v-for="(item,index) in detail.sku_size" :key="index"
                        :class="sku_index.size_index == index ? 'activeSku': ''"
                        @click="sku_index.size_index=index">
                            {{ item.size }}
                        </span>
                    </div>
                </div>
                <div class="skuList">
                    <div class="listItem">
                        <div class="number">
                            购买数量:
                            <button :disabled="pro_sku.pro_num<=1" @click="pro_sku.pro_num--">
                                ➖
                            </button>
                            <i>
                                {{ pro_sku.pro_num }}
                            </i>
                            <button :disabled="pro_sku.pro_num>=detail.num" @click="pro_sku.pro_num++">
                                ➕
                            </button>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <button @click="addCart()">
                        加入购物车
                    </button>
                    <button>
                        立即购买
                    </button>
                </div>
            </div>
        </van-overlay>
        <navigator 
            :back="true"
            :title="detail.duck_name.substr(0,15)"
        />
        <!-- 轮播图 -->
        <div class="swiper">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in detail.duck_img_list" :key="index">
                    <img v-lazy="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 商品的名称等信息 -->
        <div class="detail">
            <div class="name">
                {{ detail.duck_name }}
            </div>
            <div class="price">
                <span class="nP">
                    <span>
                        ￥
                    </span>
                    {{ detail.duck_min_price }}
                </span>
                <span class="oP">
                    ￥
                    {{ detail.duck_no_price }}
                </span>
            </div>
            <div class="hock">
                <span>
                    销量: {{ detail.duck_hot }}
                </span>
                <span>  
                    库存: {{ detail.num }}
                </span>
                <span>
                    热度: {{  detail.duck_look }}
                </span>
            </div>
        </div>
        <!-- 库存 -->
        <div class="sku" @click="sku_show=true">
            已选: {{ detail.sku_color[sku_index.color_index].color }} {{ detail.sku_size[sku_index.size_index].size }}
        </div>
        <!-- 详情 -->
        <div class="proDeal" v-html="detail.duck_desc">

        </div>
        <!-- 遮罩层组件 -->
        <van-overlay :show="show">
            <!-- 加载提示组件 -->
            <div style="display: flex;height: 100vh;justify-content: center;align-items: center;">
                <van-loading size="24px">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>
<script>
// 引入获取商品详情接口
import {
    getProductDesc,
    // 购物车接口
    addCartList
} from '@/api'
// 引入导航组件
import navigator from '@/components/navigator.vue';
export default {
    // 事件
    methods: {
        // 添加购物车
        addCart(){
            // 判断当前的价格
            if(this.detail.sku_type == 1){
                this.pro_sku.pro_price = this.detail.sku_size[this.sku_index.size_index].price
            }else{
                this.pro_sku.pro_price = this.detail.sku_color[this.sku_index.color_index].price
            }
            // 规格参数
            let arr = [
                {
                    title: this.detail.sku_color_title,
                    desc: this.detail.sku_color[this.sku_index.color_index].color
                },
                {
                    title: this.detail.sku_size_title,
                    desc: this.detail.sku_size[this.sku_index.size_index].size
                }
            ]
            // 赋值规格参数
            this.pro_sku.pro_sku = JSON.stringify(arr);
            // 加入购物车
            addCartList(this.pro_sku).then(res => {
                // console.log(res.data);
                if(res.data.code == 1){
                    this.$toast('加入购物车成功')
                }else{
                    this.$toast('失败!')
                }
            })
        },
        skucheck(e){
            if(e.target.className == 'van-overlay'){
                this.sku_show = false;
            }
        },
        getDetail(){
            // 显示遮罩层
            this.show = true;
            getProductDesc(this.objPage).then(res => {
                if(res.data.code == 1 && res.data.result.length != 0){
                    this.detail = res.data.result[0];
                    this.detail.duck_img_list = this.detail.duck_img_list
                        .replace('[','').replace(',]','')
                        .replace(/www.poralmall.com/g,'192.168.13.10').split(',');
                    // 处理详情的数据
                    this.detail.duck_desc = this.detail.duck_desc.replace('<video','<video style="width:100%;"')
                    .replace(/<img/g,'<img style="width:100%;"')
                    // 处理规格的数据
                    this.detail.sku_color = JSON.parse(this.detail.sku_color);
                    this.detail.sku_size = JSON.parse(this.detail.sku_size);
                    // 给规格附上默认值
                    this.pro_sku.pro_title = this.detail.duck_name;
                    this.pro_sku.pro_img = this.detail.duck_img.replace('www.poralmall.com','192.168.13.10');

                }else{
                    this.$toast('此商品已下架');
                    setTimeout(() => {
                        this.$router.back();
                    }, 800);
                }
                // 关闭遮罩层
                this.show = false;
            })
        }
    },
    data() {
        return {
            // 购物车参数
            pro_sku: {
                pro_num: 1,
                pro_title: null,
                pro_img: null,
                pro_price: null,
                pro_sku: '',
                pro_id: -1
            },
            objPage: {
                admin_id: null,
                product_id: null
            },
            // 控制遮罩层是否显示
            show: false,
            // 控制规格是否显示
            sku_show:false,
            // 详情的数据
            detail: {
                ID: null,
                duck_desc: null,
                duck_name: '',
                duck_hot: null,
                duck_min_price: null,
                duck_max_price: null,
                duck_no_price: null,
                duck_img_list: null,
                duck_look: null,
                duck_img: '',
                duck_img_type: null,
                num: null,
                sku_color: [{
                    price: 0
                }],
                sku_size: [{
                    price: 0
                }],
                sku_color_title :null,
                sku_size_title: null,
                sku_type: null
            },
            // 选择规格的下标
            sku_index: {
                color_index: 0,
                size_index: 0,
            }
        }
    },
    // 创建后
    created(){
        // 把传递的参数 赋值
        this.objPage = this.$route.query;
        // 给规格附上 商品id
        this.pro_sku.pro_id = this.$route.query.product_id;
        // 调用获取详情
        this.getDetail();
    },
    // 注册组件
    components:{
        navigator
    }
}
</script>